<template>
  <view>
    <view class="pb-50 oys" >
      <view class="mt-20 p-tb-20 p-lr-30 box-shadow w-full oh bg-fff br-10" v-for="(item, index) in resultList"
        :key="index">
        <view class="flex align-center justify-between">
          <text class="fz-40 font-bold">{{ item.date }}</text>
        </view>
        <view class="flex align-center justify-between mt-18 text-left">
          <view class="flex1">巡检：{{ item.inspection.finishTotal }}</view>
          <view class="flex1">用时时长：{{ totalTime(item.inspection, item.maintenance, item.repair) }}</view>
        </view>
        <view class="flex align-center justify-between mt-18 text-left">
          <view class="flex1">保养：{{ item.maintenance.finishTotal }}</view>
          <view class="flex1">工单准时率：{{ punctualRate(item.inspection, item.maintenance, item.repair) }}%</view>
        </view>
        <view class="flex align-center justify-between mt-18">
          <view class="flex1">维修：{{ item.repair.finishTotal }}</view>
          <view class="flex1">工单完成率：{{ finishRate(item.inspection, item.maintenance, item.repair) }}%</view>
        </view>
      </view>
    </view>
    <EmptyIcon v-if="!loading && resultList.length === 0" />

  </view>
</template>

<script>
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import { getOrderDetailSubList } from "@/api/statistics/staff"


export default {
  name: "DetailData",
  components: { EmptyIcon },
  props: {
    queryParams: {
      type: Object,
      default: {}
    }
  },
  created () {
    this.init()
  },
  data () {
    return {
      pageNum: 1,
      loading: true,
      hasNext: true,
      resultList: []
    }
  },
  methods: {
    init () {
      this.loading = true
      const params = {
        ...this.queryParams,
        pageSize: 10,
        pageNum: this.pageNum
      }
      getOrderDetailSubList(params).then(res => {
        this.resultList = res.rows || []
        this.hasNext = res.hasNext || false
      }).finally(() => this.loading = false)
    },
    reachBottom(){
      if (!this.loading && this.hasNext) {
        this.getNextList()
      }
    },
    getNextList () {
      this.loading = true
      const params = {
        ...this.queryParams,
        pageSize: 10,
        pageNum: this.pageNum + 1
      }
      getOrderDetailSubList(params).then(res => {
        this.pageNum++
        this.resultList = this.resultList.concat(res.rows)
        this.hasNext = res.hasNext || false
      }).finally(() => {
        this.loading = false
      })
    },
    totalTime (inspection, maintenance, repair) {
      const totalDuration = (inspection.durationTotal || 0) + (maintenance.durationTotal || 0) + (repair.durationTotal || 0)
      if(!totalDuration){
        return '00:00:00'
      }
      const hour = Math.floor(totalDuration / 3600)
      const min = Math.floor(totalDuration % 3600 / 60)
      const second = Math.floor(totalDuration % 3600 % 60)
      return `${hour > 9 ? hour : '0'+ hour}:${min > 9 ? min : '0'+ min}:${second > 9 ? second : '0'+ second}`
    },
    punctualRate (inspection, maintenance, repair) {
      const totalInspectionAndMaintenance = (inspection.total || 0) + (maintenance.total || 0) + (repair.total || 0)
      const finishOnTimeTotal = totalInspectionAndMaintenance - (inspection.timeoutTotal || 0) - (maintenance.timeoutTotal || 0) - (repair.timeoutTotal || 0)
      return finishOnTimeTotal < 0 ? '-'
          : totalInspectionAndMaintenance === 0 ? '100'
          : `${(finishOnTimeTotal / totalInspectionAndMaintenance * 100).toFixed(0)}`
    },
    finishRate (inspection, maintenance,repair) {
      const allTotal = (inspection.total + maintenance.total + repair.total) || 0
      const finishTotal = (inspection.finishTotal + maintenance.finishTotal + repair.finishTotal) || 0
      if(allTotal === 0 || finishTotal === 0){
        return 0
      }
      return Math.round(finishTotal / allTotal * 100)
    }
  },
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
</style>
